<!--
    配置式详情组件
-->
<template>
  <div class="config-detail">
    <template v-for="(itemArr, index) in detailConfig" :key="index">
      <detail-layout :label-width="labelWidth" :model="model">
        <template v-for="item in itemArr" :key="item.key">
          <template v-if="item.slotName">
            <slot :name="item.slotName"></slot>
          </template>
          <detail-item
            v-else-if="item.detailType === 'image'"
            :detail-type="item.detailType"
            :label="item.label"
            :img-url="getDetailInfo(item)"
            :span="24 / itemArr.length"
          ></detail-item>
          <detail-item
            v-else-if="item.detailType === 'imageList'"
            :detail-type="item.detailType"
            :label="item.label"
            :img-url-list="getDetailInfo(item)"
            :span="24 / itemArr.length"
          ></detail-item>
          <detail-item
            v-else
            :label="item.label"
            :text="getDetailInfo(item)"
            :span="24 / itemArr.length"
          ></detail-item>
        </template>
      </detail-layout>
    </template>
  </div>
</template>

<script lang="ts" setup>
import detailLayout from './detailLayout.vue'
import DetailItem from './detailItem.vue'
import { provide } from 'vue'
import { detailConfigType } from './type';

interface configDetailType {
  detailConfig: Array<detailConfigType[]>,
  detailData: any
  labelWidth: string
  labelStyle?: Partial<CSSStyleDeclaration>,
  model: string
}
const props = withDefaults(defineProps<configDetailType>(), {
  labelWidth: '90px',
  model: 'page'
})
// 获取字段数据默认的返回值
const defaultData = {
  text: '-',
  image: '',
  imageList: []
}

const getDetailInfo = (item: detailConfigType) => {
  if (item.func) {
    return item.func(item.key, props.detailData)
  }
  let detailType = item.detailType ? item.detailType : 'text'
  return props.detailData ? props.detailData[item.key] : defaultData[detailType]
}

// 注入父组件的属性
provide('labelWidth', props.labelWidth)
provide('labelStyle', props.labelStyle)

</script>

<style lang="less" scoped>
.detail-item {
  width: 50%;
  display: inline-flex;
  line-height: 20px;
  padding: 0 20px;
  margin-bottom: 20px;
  font-size: 15px;

  .detail-label {
    width: 90px;
    height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    flex-shrink: 0;
    color: #7d7989;
    font-weight: bold;
  }

  .detail-content {
    color: black;
    word-break: break-all;
  }
}
</style>
